<template>
  <div class="app-container">
    <main class="mt10 flex">
      <div class="flex">
        <div class="tree">
          <el-tree :data="data" :props="defaultProps" @node-click="handleNodeClick" />
        </div>
        <div>
          <el-card shadow="never" :body-style="{ padding: '72px 110px 0px' }">
            <div slot="header"><span class="f16" style="font-weight: 600">新增分类</span>``</div>
            <div class="flex add">
              <div class="flex item">
                <span class="f14" style="width: 90px">分类编码</span>
                <el-input class="input" placeholder="请输入分类编码" />
              </div>
              <div class="flex item">
                <span class="f14" style="width: 90px">分类名称</span>
                <el-input class="input" placeholder="请输入分类名称" />
              </div>
              <div class="flex item btn">
                <el-button type="primary" size="default" @click="" class="primaryBth">新增</el-button>
                <el-button type="primary" size="default" @click="" class="primaryBth">删除</el-button>
              </div>
            </div>
          </el-card>

          <el-card shadow="never" :body-style="{ padding: '72px 110px 0px' }">
            <div slot="header"></div>
            <div class="flex add">
              <div class="flex item">
                <span class="f14" style="width: 90px">分类编码</span>
                <el-input class="input" placeholder="" disabled />
              </div>
              <div class="flex item">
                <span class="f14" style="width: 90px">分类名称</span>
                <el-input class="input" placeholder="" disabled />
              </div>
            </div>
          </el-card>
        </div>
      </div>

      <div class="btns">
        <el-button class="bg" type="primary" size="default" @click="">保存</el-button>
        <el-button type="primary" size="default" @click="">打印</el-button>
      </div>
    </main>
  </div>
</template>
<script lang="ts">
import { defineComponent, ref } from 'vue'
import JMessage from '@/utils/JMessage'
export default defineComponent({
  name: ''
})
</script>
<script lang="ts" setup>
import { i18n, Jzhcn } from '@/i18n'
const handleNodeClick = (data: Tree) => {
  console.log(data)
}
interface Tree {
  label: string
  children?: Tree[]
}
const data: Tree[] = [
  {
    label: 'Level one 1',
    children: [
      {
        label: 'Level two 1-1',
        children: [
          {
            label: 'Level three 1-1-1'
          }
        ]
      }
    ]
  },
  {
    label: 'Level one 2',
    children: [
      {
        label: 'Level two 2-1',
        children: [
          {
            label: 'Level three 2-1-1'
          }
        ]
      },
      {
        label: 'Level two 2-2',
        children: [
          {
            label: 'Level three 2-2-1'
          }
        ]
      }
    ]
  },
  {
    label: 'Level one 3',
    children: [
      {
        label: 'Level two 3-1',
        children: [
          {
            label: 'Level three 3-1-1'
          }
        ]
      },
      {
        label: 'Level two 3-2',
        children: [
          {
            label: 'Level three 3-2-1'
          }
        ]
      }
    ]
  }
]

const defaultProps = {
  children: 'children',
  label: 'label'
}

const value = ref('')
const options = [
  {
    value: 'Option1',
    label: 'Option1'
  },
  {
    value: 'Option2',
    label: 'Option2'
  },
  {
    value: 'Option3',
    label: 'Option3'
  },
  {
    value: 'Option4',
    label: 'Option4'
  },
  {
    value: 'Option5',
    label: 'Option5'
  }
]
</script>

<style lang="less" scoped>
main {
  height: 320rem;
  background-color: white;
  justify-content: space-between;

  .tree {
    width: 336px;
    border: 1px solid #e6e6e6;
    margin: 13px 10px 15px;
  }

  .add {
    flex-direction: column;

    .item {
      align-items: center;
      margin-top: 15px;
    }

    .item.btn {
      justify-content: space-between;
    }
  }

  .btns {
    display: flex;
    align-items: flex-end;
    margin: 10px 20px 10px;

    .bg {
      background-color: #e7e7e7;
      border: 1px solid #e7e7e7;
      color: #000000;
    }
  }
}
</style>
